<template>
  <div class="envShow">
    <el-form :model="searchForm" label-width="40%" size="small">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="环境名称 ：">
            <el-input type="text" v-model="searchForm.svrName" maxlength="20" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="方法：">
            <el-select v-model.trim="searchForm.method" style="width:100%" filterable>
              <el-option v-for="item in methodList"
                         :key="item.keyc"
                         :label="item.keyc"
                         :value="item.keyc"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="模板：">
            <el-input v-model="searchForm.tmplId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="协议：">
            <el-input v-model="searchForm.svrType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="IP：">
            <el-input v-model="searchForm.svrIp"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="端口：">
            <el-input v-model="searchForm.svrPort"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="button" :gutter="24">
        <el-col :span="10">
          <el-form-item label-width="0px">
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="0px">
            <el-button type="primary" size="small" @click="submit()">提 交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import Api from '../../constants/Api';
  import axios from '../../axios';
  import { mapState } from 'vuex';
  import { SUCCESS_CODE } from '../../constants/constant';

  export default {
    name: 'envShow',
    data() {
      return {
        searchForm: {
          // 环境名称
          svrName: this.$route.params.label,
          // 协议类型
          svrType: '',
          // 树节点ID
          svrId: this.$route.params.id,
          // 服务器IP
          svrIp: '',
          // 服务器Port
          svrPort: '',
          // 模板ID
          tmplId: '',
          // 方法
          method: '',
        },
        treeForm: {
          id: 1000,
        },
        EnvPara: null
      };
    },
    mounted() {
      const vm = this;
      vm.getData();
    },
    computed: {
      ...mapState({
        methodList: state => state.staticParamList.methodList,
      }),
    },
    methods: {
      getData() {
        const vm = this;
        axios.post(Api.searchEnv, {
          sysHead: {
            serviceCode: 'MbsdAccount',
            messageType: '',
            messageCode: ''
          },
          appHead: {},
          body: {
            svrId: vm.searchForm.svrId
          }
        })
          .then(res => {
            if (res.code === SUCCESS_CODE) {
              // vm.getEnvTree(vm);
              vm.searchForm.svrName = res.data.svrName;
              vm.searchForm.svrType = res.data.svrType;
              vm.searchForm.svrIp = res.data.svrIp;
              vm.searchForm.svrPort = res.data.svrPort;
              vm.searchForm.method = JSON.parse(res.data.svrInfo).method;
              vm.searchForm.tmplId = res.data.tmplId;
              vm.$message.success('查询环境成功');
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(function (err) {
              console.log(err);
            }
          );
      },
      submit() {
        const vm = this;
        axios.post(Api.updateEnv, {
          sysHead: {
            serviceCode: 'MbsdAccount',
            messageType: '',
            messageCode: ''
          },
          appHead: {},
          body: {
            svrId: vm.searchForm.svrId,
            // svrName: vm.searchForm.svrName,
            svrType: vm.searchForm.svrType,
            method: vm.searchForm.method,
            tmplId: vm.searchForm.tmplId,
            svrIp: vm.searchForm.svrIp,
            svrPort: vm.searchForm.svrPort,
          }
        })
          .then(res => {
            if (res.code === SUCCESS_CODE) {
              // vm.getEnvTree(vm);
              vm.$message.success('提交成功');
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(function (err) {
              console.log(err);
            }
          );
      },
    }
  };
</script>
<style lang='scss' scoped>
  .envShow {
    padding-top: 50px;
    border-top: 1px solid #9d9d9d;
    height: 42px;
    line-height: 32px;
  }

  .button {
    margin-top: 30px;
  }
</style>

